<template>
  <div class="directive-operation">
    <div class="text-right">
      <!-- 待审核指令 -->
      <template v-if="path === 'pend'">
        <IconButton
          :icon="isFirst && state === 'FIRST_AUDIT' ? 'audit_active' : 'audit'"
          title="待审核"
          :activated="false"
          :disabled="!isFirst || state !== 'FIRST_AUDIT'"
          @click.native="handleAduit(directiveInfo)"
        ></IconButton>
        <IconButton
          :icon="isAbort && state === 'SECOND_AUDIT' ? 'abort_active' : 'abort'"
          title="终止"
          class="ml14"
          :activated="false"
          :disabled="!isAbort || Boolean(state !== 'SECOND_AUDIT')"
          @click.native="handleAbort(directiveInfo)"
        ></IconButton>
      </template>

      <!-- 全部指令 -->
      <template v-if="path === 'all'">
        <IconButton
          v-permission="'instruct/execute/case'"
          :icon="directiveInfo.detailStyle === 'PAGE' ? 'directiveDetails_active' : 'viewFb_active'"
          :title="directiveInfo.detailStyle === 'PAGE' ? '指令执行情况' : '网站反馈情况'"
          class="mr15"
          :activated="false"
          :disabled="['FIRST_NOT_PASS', 'SECOND_NOT_PASS'].includes(state)"
          @click.native="toDetails(directiveInfo)"
        ></IconButton>

        <IconButton
          :icon="directiveInfo.canAbort ? 'abort_active' : 'abort'"
          title="终止"
          :activated="false"
          :disabled="!isAbort || ['FIRST_NOT_PASS', 'SECOND_NOT_PASS'].includes(state)"
          @click.native="handleAbort(directiveInfo)"
        ></IconButton>
      </template>
    </div>

    <ModalConfrim :visible.sync="visible.audit" title="审核" @on-ok="modalAuditOk" @on-no="modalAuditCancel">
      <p class="text-center f14">是否通过审核？</p>
    </ModalConfrim>

    <ModalConfrim :visible.sync="visible.abort" title="终止" :show-footer="false" @on-ok="modalAbortOk">
      <p class="text-center f14">是否终止？</p>
    </ModalConfrim>
  </div>
</template>

<script>
import ModalConfrim from '@/components/common/ModalConfrim/ModalConfrim'

// request
import { commandAudit_first, commandAbort } from '@/api/manageEnd/propagandizeDirective/pendingReviewDirective.js'
export default {
  name: 'DirectiveOperation',

  components: { ModalConfrim },

  props: {
    viewDetails: Object,
  },

  data() {
    return {
      /* 待审核指令数据 */
      visible: {
        audit: false,
        abort: false,
      },
      currentAuditItems: [],
      currentAbortItems: [],
    }
  },

  computed: {
    path() {
      return this.$route.query.p
    },
    directiveInfo() {
      return this.viewDetails.info || {}
    },
    state() {
      return this.directiveInfo.state && this.directiveInfo.state.key
    },
    isFirst() {
      return this.directiveInfo.canFirstAudit
    },
    isAbort() {
      return this.directiveInfo.canAbort
    },
  },

  methods: {
    handleAduit(row) {
      this.currentAuditItems = [row]
      this.visible.audit = true
    },

    handleAbort(row) {
      this.currentAbortItems = [row]
      this.visible.abort = true
    },

    modalAuditOk() {
      const ids = this.currentAuditItems.map((it) => it.id).join()
      this.commandAudit_first({ ids, message: '', pass: true })
    },

    modalAuditCancel() {
      const ids = this.currentAuditItems.map((it) => it.id).join()
      this.commandAudit_first({ ids, message: '', pass: false })
    },

    modalAbortOk() {
      this.commandAbort(this.currentAbortItems.map((it) => it.id).join())
    },

    toDetails(row) {
      // console.log(row)
      let name = ''
      if (row.detailStyle === 'PAGE') {
        name = 'directiveExecuteStatus'
      } else if (row.detailStyle === 'LIST') {
        name = 'directiveReshipDetails'
      }
      this.$router.push({ name, query: { id: row.id } })
    },

    async commandAudit_first(params) {
      const res = await commandAudit_first(params)
      const status = res.data.status
      if (status === 0) {
        this.$Message.success('操作成功')
        this.$emit('on-refresh-info')
      } else {
        this.$Message.error(res.data.message || '操作失败，请稍后再试')
      }
    },

    async commandAbort(id) {
      const res = await commandAbort(id)
      const status = res.data.status
      if (status === 0) {
        this.$Message.success('操作成功')
        this.$emit('on-refresh-info')
      } else {
        this.$Message.error(res.data.message || '操作失败，请稍后再试')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.directive-operation {
  margin: 0 20px 4px 0;
}
</style>
